<template>
  <ul>
    <li v-for="(p, index) in products" :key="p.id||index">
      {{p.title}} - {{p.price}}
      <br>
      <button :disabled="!p.inventory" @click="addToCart(p)">Add to cart</button>
    </li>
  </ul>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'

export default {
  computed: {
    ...mapGetters({
      products: 'allProducts'
    })
  },
  methods: {
    ...mapActions(['getAllProducts', 'addToCart'])
  },
  created () {
    // this.getAllProducts()
    this.$store.dispatch('getAllProducts')
  }
}
</script>

<style>

</style>
